<template>
  <div class="home">
    <van-nav-bar title="智慧农场" left-arrow @click-left="onClickLeft" />
    <div class="home-content">
      <p class="home-content-area-text">基本信息</p>
      <transition-group tag="ul" class="home-content-info">
        <li
          class="home-content-info-item"
          v-for="item in infoData"
          :key="item"
        >
          <div class="home-content-info-item-title">
            <p class="home-content-info-item-title-name">{{ item.name }}</p>
          </div>
          <p class="home-content-info-item-data" :style="{ color: item.color }">
            {{ item.data }}
          </p>
        </li>
      </transition-group>
      <p class="home-content-area-text">设备控制</p>
      <div class="home-content-control">
        <van-cell-group>
          <van-cell
            center
            size="large"
            :label="deviceData.modeState === true ? '自动' : '手动'"
            title="控制模式"
          >
            <template #right-icon>
              <van-switch
                v-model="deviceData.modeState"
                :loading="deviceData.modeload"
                @change="onmodeChange(deviceData)"
                size="24"
              />
            </template>
          </van-cell>
          <van-cell
            center
            size="large"
            :label="deviceData.ledState === true ? '开启' : '关闭'"
            title="灯光开关"
          >
            <template #right-icon>
              <van-switch
                v-model="deviceData.ledState"
                :loading="deviceData.ledload"
                @change="onledChange(deviceData)"
                :disabled="deviceData.modeState === true ? true : false"
                size="24"
              />
            </template>
          </van-cell>
          <van-cell
            center
            size="large"
            :label="deviceData.relayState === true ? '开启' : '关闭'"

            title="水泵开关"
          >
            <template #right-icon>
              <van-switch
                v-model="deviceData.relayState"
                :loading="deviceData.relayload"
                @change="onrelayChange(deviceData)"
                :disabled="deviceData.modeState === true ? true : false"
                size="24"
              />
            </template>
          </van-cell>
          <van-cell
            center
            size="large"
            :label="deviceData.ledSet + 'Lux'"
            title="灯光开启阈值"
          >
            <template #right-icon>
              <van-stepper
                v-model="deviceData.ledSet"
                step="10"
                min="0"
                @change="onledSet"
              />
              <!-- <van-switch v-model="deviceData.relayState" :loading="deviceData.relayload" @change="onrelayChange(deviceData)" size="24" /> -->
            </template>
          </van-cell>
          <van-cell
            center
            size="large"
            :label="deviceData.relaySet + '%'"
            title="水泵开启阈值"
          >
            <template #right-icon>
              <van-stepper
                v-model="deviceData.relaySet"
                step="1"
                min="0"
                max="100"
                @change="onrelaySet"
              />
              <!-- <van-switch v-model="deviceData.relayState" :loading="deviceData.relayload" @change="onrelayChange(deviceData)" size="24" /> -->
            </template>
          </van-cell>
        </van-cell-group>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  components: {},
  created: function () {
    this.mqttMsg();
  },
  data: function () {
    return {
      activeNames: [],
      res: "",
      deviceData: {
        modeload: false,
        ledload: false,
        relayload: false,
        ledSet: 0,
        relaySet: 0,
        modeState: true,
        ledState: "",
        relayState: "",
      },
      infoData: [
        {
          // Icon: require('@img/ADD1.svg'),
          name: "环境温度",
          data: "离线",
        },
        {
          // Icon: require('@img/ADD1.svg'),
          name: "环境湿度",
          data: "离线",
        },
        {
          // Icon: require('@img/ADD1.svg'),
          name: "光照强度",
          data: "离线",
        },
        {
          // Icon: require('@img/ADD1.svg'),
          name: "土壤湿度",
          data: "离线",
        },
        {
          // Icon: require('@img/ADD1.svg'),
          name: "火焰报警",
          data: "离线",
          color: "black",
        },
      ],
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    onmodeChange(res) {
      this.deviceData.modeState = res.modeState;
      this.deviceData.modeload = true;
      var send = {};
      send["FL"] = res.modeState === true ? "1" : "0";
      this.$mqtt.publish("Farm_1/control", send);
    },
    onledChange(res) {
      this.deviceData.ledState = res.ledState;
      this.deviceData.ledload = true;
      var send = {};
      send["LED"] = res.ledState === true ? "1" : "0";
      this.$mqtt.publish("Farm_1/control", send);
    },
    onrelayChange(res) {
      this.deviceData.realyState = res.relayState;
      this.deviceData.relayload = true;
      var send = {};
      send["RE"] = res.relayState === true ? "1" : "0";
      this.$mqtt.publish("Farm_1/control", send);
    },
    onledSet() {
      var send = {};
      send["LUS"] = this.deviceData.ledSet.toString()
      this.$mqtt.publish("Farm_1/control", send);
    },
    onrelaySet() {
      var send = {};
      send["RES"] = this.deviceData.relaySet.toString()
      this.$mqtt.publish("Farm_1/control", send);
      
    },
    mqttMsg() {
      // 接收消息处理
      this.$mqtt.message(this.$route.params.pub, (topic, message) => {
        console.log(message.toString()); //控制台显示接收到的数据
        this.data = message.toString();
        try {
          this.res = JSON.parse(message.toString());
          this.infoData[0].data = this.res.TE + "°C";
          this.infoData[1].data = this.res.HU + "%";
          this.infoData[2].data = this.res.LU + "Lux";
          this.infoData[3].data = this.res.SO + "%";
          this.infoData[4].data = this.res.GS === "1" ? "正常" : "警报";
          this.infoData[4].color = this.res.GS === "1" ? "green" : "red";
          //this.deviceData.modeState = this.res.FL === "1" ? true : false;
          //this.deviceData.ledState = this.res.LED === "1" ? true : false;

          if (this.deviceData.modeload) {
            if (
              this.deviceData.modeState === (this.res.FL === "1" ? true : false)
            ) {
              this.deviceData.modeload = false;
              Toast.success("模式设定成功");
            }
          } else {
            this.deviceData.modeState = this.res.FL === "1" ? true : false;
          }
          if (this.deviceData.ledload) {
            if (
              this.deviceData.ledState === (this.res.LED === "1" ? true : false)
            ) {
              this.deviceData.ledload = false;
              Toast.success("灯光设定成功");
            }
          } else {
            this.deviceData.ledState = this.res.LED === "1" ? true : false;
          }
          if (this.deviceData.relayload) {
            if (
              this.deviceData.relayState ===
              (this.res.RE === "1" ? true : false)
            ) {
              this.deviceData.relayload = false;
              Toast.success("水泵设定成功");
            }
          } else {
            this.deviceData.relayState = this.res.RE === "1" ? true : false;
          }
          this.deviceData.ledSet = this.res.LUS;
          this.deviceData.relaySet = this.res.RES;
        } catch (err) {
          console.log(err.message);
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.v-enter,
.v-leave-to {
  opacity: 0;
  transform: translateX(100px);
}

.v-enter-active,
.v-leave-to {
  transition: all 0.6s ease;
}

/* v-move 和 v-leave-to 配合使用，能够实现列表后续的元素，逐渐飘上来的效果 */
.v-move {
  transition: all 0.6s ease;
}

.v-leave-to {
  position: absolute;
}
.home {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  //overflow: auto;
  display: flex;
  flex-flow: column;
  position: absolute;
  &-content {
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: left;
    justify-content: left;
    transition: 0.3s;
    //overflow: auto;
    &-control {
      border-radius: 20px;
      margin-top: 0px;
      margin-left: 20px;
      margin-right: 20px;
      margin-bottom: 20px;
    }
    &-area {
      &-text {
        margin-left: 20px;
        font-size: 5vw;
        color: white;
        font-weight: 900;
      }
    }
    &-text {
      margin: px2rem(20);
      font-size: px2rem(30);
      color: white;
      font-weight: 600;
      margin-bottom: px2rem(30);
    }
    &-shebei {
      margin-left: px2rem(20);
      margin-bottom: px2rem(5);
      font-size: px2rem(14);
      color: white;
      font-weight: 400;
    }
    &-info {
      //height: 100vh;
      //width: 100%;
      transition: 0.5s;
      //text-align: center;
      //display: flex;
      //flex-wrap: wrap;
      //justify-content: space-between;
      padding: 0 16px 0 16px;
      
      //overflow-y: scroll;
      &-item {
        transition: 0.5s;
        margin: 5px;
        text-align: center;
        padding: 5px;
        border-radius: 20px 20px 20px 20px;
        // box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.3);
        width: calc(50% - 20px);
        // height: calc(50% - 10px);
        display: flex;
        position: relative;
        flex-direction: column;
        justify-content: left;
        background-color: rgba(255, 255, 255, 0.9);
        background-attachment: fixed;
        &-title {
          display: flex;
          flex-direction: row;
          align-items: center;

          &-name {
            margin: auto;
            transition: 0.5s;
            text-align: left;
            color: black;
            //margin-top: 0;
            font-size: 4vw;
          }
        }

        &-data {
          transition: 0.5s;
          // text-align: right;
          color: black;
          margin: auto;
          font-size: 10vw;
          font-weight: 500;
        }
      }
    }
  }
}
.custom-button {
  width: auto;
  padding: 5px 10px;
  color: #fff;
  font-size: 4vw;
  line-height: 5vw;
  text-align: center;
  background-color: #0aadee;
  border-radius: 20px;
}
</style>